<template>
    <div class="search-popup">
        <form action="/">
            <van-search
                shape="round"
                v-model="searchVal"
                show-action
                :placeholder="placeholderVal"
                @search="onSearch"
                @cancel="$router.back()"
                @input="OnInput"
            />
            <!--      当输入框内容发生变化是触发onInput事件-->
            <HistoryHot
                v-if="blockShow === 1"
                :hotKeywordList="hotKeywordList"
                :historyKeywordList="historyKeywordList"
                @tagClick="tagClick"
            />
            <SearchTipsList
                v-else-if="blockShow === 3"
                :historyKeywordList="historyKeywordList"
                :searchTipsListData="searchTipsListData"
                @tagClick="tagClick"
            />

            <SearchProducts v-else
                            :GoodsListData="GoodsListData"
                            :filterCategory="filterCategory"
                            @categoryChangeSearch="categoryChangeSearch"
                            @priceChange="priceChange"
            />

            <!--      <comp1 v-else-if="blockShow === 2"/>-->
            <!--      <comp1 v-else/>-->
        </form>
    </div>
</template>

<script>
import {GetGoodsListData, GetHishotData, GetSearchTipsData} from "@/api/home";
import HistoryHot from "@/components/HistoryHot";
import SearchTipsList from "@/components/SearchTipsList";
import SearchProducts from "@/components/SearchProducts";

export default {
    name: "SearchPopup.vue",
    components: {
        SearchTipsList,
        HistoryHot,
        SearchProducts,
    },
    data() {
        return {
            //搜索框
            searchVal: "",
            placeholderVal: "",
            //为1展示历史记录和热门搜搜索
            //为2展示搜索提示的列表
            //表示搜索的产品的内容
            blockShow: 1,
            hotKeywordList: [],
            historyKeywordList: [],
            // 根据关键词提示
            searchTipsListData: [],

            //分类类型
            filterCategory: [],

            //搜索商品列表的 对象；
            GoodsListData: {},
            //价格排序（由低到高，或者由高到低）
            order: "desc",
            // =分类的id
            categoryId: 0,
            //默认的搜索id
            sort: "id",
        };
    },
    beforeCreate() {
        GetHishotData().then((res) => {
            this.placeholderVal = res.data.defaultKeyword.keyword;
            this.hotKeywordList = res.data.hotKeywordList;
            this.historyKeywordList = res.data.historyKeywordList;
        });
    },
    methods: {
        async onSearch(val) {
            this.blockShow = 2;
            if (val === "") val = this.placeholderVal;
            this.searchVal = val;
            let {data} = await GetGoodsListData({
                keyword: val,
                page: 1,
                size: 20,
                order: this.order,
                categoryId: this.categoryId,
                sort: this.sort,
            });
            this.GoodsListData = {...data};

            this.filterCategory = JSON.parse(
                JSON.stringify(data.filterCategory)
                    .replace(/name/g, "text")
                    .replace(/id/g, "value")
            );
        },
        tagClick(val) {
            this.onSearch(val);
        },
        async OnInput(val) {
            //每一输入一个符号的时候，先清除掉上一次输入的定时器
            if (this.timer) {
                clearTimeout(this.timer);
            }
            //防抖
            this.timer = setTimeout(() => {
                //把界面修改成3
                this.blockShow = 3;
                GetSearchTipsData({keyword: val}).then((res) => {
                    this.searchTipsListData = res.data;
                });
            }, 500);
        },


        //先赋值 再进行调用
        categoryChangeSearch(value) {
            this.categoryId = value;
            this.onSearch(this.searchVal);
        },
        priceChange(value) {
            this.order = value;
            this.sort = "price";
            this.onSearch(this.searchVal);
        },
    },
};
</script>

<style scoped lang="less">
.search-popup {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    right: 0;
    left: 0;
    background-color: #efefef;
}
</style>
